<template>
  <div>
    <div style="margin: 0 auto; width: 40px; height: 40px; padding-top: 5px">
      <img src="../img/icon.png" alt="" width="100%" height="100%" />
    </div>

    <div
      style="
        width: 334px;
        height: 500px;
        border-radius: 30px;
        background-color: white;
        margin: 0 auto;
      "
    >
      <ul style="padding: 0 0 20px 0 ">
        <li>
          <h4 style="display: flex; justify-content: center; padding-top: 30px">
            关于你的公司
          </h4>
        </li>
        <li>
          <p>你的公司名字</p>
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                v-model="companyName"
                name="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
                style="border: 1px solid #ccc"
              />
            </van-cell-group>
          </van-form>
        </li>
        <li>
          <p>业务方向</p>
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>
        </li>

        <li>
          <p>你的团队有多少人？</p>
          <!-- 一个四乘四的点击高亮的一个选择 -->
          <div class="range-container" @click="toggleActive">
            <div
              class="range-item"
              v-for="item in rangeItems"
              :key="item"
              :class="{ active: isActive(item) }"
            >
              {{ item }}
            </div>
          </div>
        </li>
      </ul>
      <div
        style="
          display: flex;
          justify-content: space-between;
        "
      >
        <p style="color: #3f8cff" @click="last">上一步</p>
        <van-button
          round
          type="primary"
          style="width: 145px; height: 48px"
          @click="geNest"
          native-type="submit"
        >
          下一步
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast } from 'vant';
const router = useRouter();
const companyName = ref("");
const value1 = ref(0);
const checked = ref("1");
const option1 = [
  { text: "互联网", value: 0 },
  { text: "金融", value: 1 },
  { text: "医疗", value: 2 },
  { text: "教育", value: 3 },
  { text: "其他", value: 4 },
];

const rangeItems = [
  "只有我",
  "2-5",
  "6-10",
  "11-20",
  "21-40",
  "41-50",
  "51-100",
  "101-500",
];

const activeItem = ref(null);

function toggleActive(event) {
  const target = event.target;
  if (target.classList.contains("range-item")) {
    const item = target.textContent;
    activeItem.value = item === activeItem.value ? null : item;
  }
}

function isActive(item) {
  return item === activeItem.value;
}
const geNest = () => {
    if(companyName.value === ""){
        showFailToast('失败文案');
    }else{
        router.push({path: "/tuand"});
    }
};
const last = () => {
  router.go(-1);
};
const onSubmit = (values) => {
  console.log("submit", values);
};
</script>

<style scoped>
.range-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
}

.range-item {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 10px;
  width: 40px;

}

.active {
  background-color: #007bff;
  color: white;
}
</style>
